<template >
    <!-- 头部开始 -->
    <div class="background">
      <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo no-bottom-border"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#424254"
          @select="handleSelect"
      >
        <el-menu-item index="1">
          <span class="text">
            OP.GG
          </span>
        </el-menu-item>
        <el-menu-item index="2"><img
            src="https://s-opgg-kit.op.gg/gnb/config/images/icon/bfa5abe2f78d6e9a55e81c9988c31442.svg?image=q_auto:good,f_webp,w_48,h_48"
            width="24"
            height="24"
            alt="" loading="lazy">战绩</el-menu-item>
        <el-menu-item index="3" ><router-link :to="{ name: 'default' }">Go to Default</router-link></el-menu-item>
        <el-menu-item index="4"></el-menu-item>
      </el-menu>
    </div>
    <!-- 头部结束 -->
  <div style="margin-top: 50px; height: auto">
  <el-carousel :interval="5000" arrow="always" style=" height: 120px">
    <el-carousel-item v-for="item in 4" :key="item">
      
    </el-carousel-item>
  </el-carousel>
  </div>
  <div>
    <RouterView class="index1"/>
  </div>
</template>


<script lang="ts" setup>
import {reactive, ref} from 'vue'
import request from "@/utils/request.js";

const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

</script>

<style scoped>

.background {
  background-color: rgb(28,28,31);
  position: fixed; /* 固定定位，覆盖整个视口 */
  top: 0;
  left: 0;
  width: 100vw;   /* 100% 视口宽度 */
  height: 100vh;  /* 100% 视口高度 */
  margin: 0;
  padding: 0;
  z-index: -1;    /* 确保背景在内容下方 */

}
.el-menu-demo{
  background-color: rgb(28,28,31);
  height:5%;
}
.index1{
  z-index: 500;    /* 关键：确保最高层级 */
}
.no-bottom-border.el-menu--horizontal {
  border-bottom: none !important;
}
.text {
  color: #ffffff;
  /* 字体样式 */
  font-family: 'Arial', sans-serif; /* 可替换为其他字体 */
  font-size: 20px; /* 字体大小 */
  font-weight: 600; /* 字体粗细 (100-900) */
  letter-spacing: 1px; /* 字符间距 */
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin-top: 0;
  text-align: center;

}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>